@media (max-width: 1024px) {
    #loancard ul.nav-pills {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
  
    #loancard ul.nav-pills li.nav-item {
      flex: 0 0 30%; /* Adjust width for 3 columns (approximately 30% with margins) */
      text-align: center;
      margin: 10px; /* Adds space between items */
    }
  
    #loancard ul.nav-pills button.nav-link {
      font-size: 14px; /* Adjust font size for mobile */
      padding: 8px 12px; /* Adjust button padding */
    }
  }
  
  @media (max-width: 1024px) {
    #loancard ul.nav-pills li.nav-item {
      flex: 0 0 30%; /* Ensure 3 columns on smaller screens */
      text-align: center;
      margin-bottom: 10px; /* Adds space between rows */
    }
  
    #loancard ul.nav-pills button.nav-link {
      width: 100%; /* Ensure the button takes full width of the column */
      font-size: 12px; /* Further reduce font size for smaller screens */
      padding: 6px 10px; /* Adjust padding for small buttons */
    }
  }

  @media (max-width: 1024px) {
    .hide-on-mobile-and-tablet {
      display: none; /* Hides the section on screens smaller than 992px */
    }
  }

  @media (max-width: 1024px) {
    .hide-on-mobile {
      display: none; /* Hides the section on screens smaller than 768px */
    }
  }

/* Base styles for larger screens remain unchanged */

@media (max-width: 1024px) {
  /* Only apply these styles for mobile screens */
  .row {
    display: flex;
    flex-wrap: wrap;
  }

  .custom-card-body {
    padding: 1rem;
  }

  .col-md-6 {
    margin-bottom: 1rem; /* Add space below each card on mobile */
  }

  /* Add extra margin below the top row */
  .col-md-6:nth-child(1),
  .col-md-6:nth-child(2) {
    margin-bottom: 2rem; /* Extra space below the top row */
  }
}

/* Base styles for larger screens remain unchanged */

/* Media query for mobile screens */
@media (max-width: 1024px) {
  /* Align <li> items to the left on smaller screens */
  .card-body ul {
    padding-left: 1rem; /* Add padding to create some space on the left */
    list-style-position: inside; /* Optional: Move the bullet points inside */
  }

  .card-body ul li {
    text-align: left;
    margin-bottom: 0.5rem; /* Add space between list items for readability */
  }
}